<template>
  <div class="app-container">
    <basic-table
      :table-title="tableTitle"
      :data-source="dataSource"
      :button-group="buttonGroup"
      :search-form="searchForm"
      :multiple-table="false"
    />
    <el-dialog :title="'新增'" :visible.sync="dialogFormVisible" top="3%">
      <div class="el-dialog-div">
        <data-form
          :loading="loading"
          @createDataEmit="createDataEmit"
          @dialogFormVisibleEmit="dialogFormVisibleEmit"
        />
      </div>
    </el-dialog>
    <el-dialog :title="'修改密码'" :visible.sync="dialogPasswordVisible" top="3%">
      <div class="el-dialog-div">
        <password-form
          :user="user"
          @createPassword="createPassword"
          @dialogPasswordVisibleEmit="dialogPasswordVisibleEmit"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import DataForm from '@/views/userManagement/components/dataForm.vue'
import PasswordForm from '@/views/userManagement/components/passwordForm.vue'
import BasicTable from '@/components/BasicTable/index.vue'

import { AddSysUser, ChangeSysUserPassWord, GetSysUserPage } from '@/api/SysUser.js'
import { TipsBox } from '@/utils/feedback.js'
import { jsonToParams } from '@/utils'
import dayjs from 'dayjs'

export default {
  name: 'UserManagement',
  components: { BasicTable, DataForm, PasswordForm },
  data() {
    return {
      dialogFormVisible: false,
      dialogPasswordVisible: false,
      dialogUpdateUpLimit: false,
      loading: false,
      dataSource: () => GetSysUserPage,
      tableTitle: [
        {
          label: '用户名',
          value: 'UserName',
          show: true
        },
        {
          label: '状态',
          value: 'Enabled',
          show: true,
          transfer: {
            0: '禁用',
            1: '启用'
          }
        },
        {
          label: '创建时间',
          value: 'CreateOn',
          show: true
        },
        {
          label: '操作',
          show: true,
          type: 'options',
          options: [
            {
              text: '修改密码',
              icon: 'el-icon-edit',
              type: 'success',
              callback: row => {
                this.dialogPasswordVisible = true
                this.user = { ...this.user, ...row }
              }
            }
          ]
        }
      ],
      user: {},
      searchForm: {
        expend: true,
        title: '表格筛选',
        size: 'small',
        fields: [
          {
            show: true,
            type: 'input',
            label: '用户名',
            labelShow: false,
            name: 'userName'
          }
        ]
      },
      buttonGroup: {
        expend: true,
        show: true,
        title: '表格筛选',
        size: 'small',
        fields: [
          {
            showButtonGroup: true,
            text: '添加',
            icon: 'el-icon-check',
            callback: type => {
              this.dialogFormVisible = true
            }
          }
        ]
      }
    }
  },
  methods: {
    dialogFormVisibleEmit(v) {
      this.dialogFormVisible = v
    },
    dialogPasswordVisibleEmit(v) {
      this.dialogPasswordVisible = v
    },
    // add
    createDataEmit(v) {
      this.loading = true
      AddSysUser(jsonToParams(v)).then(res => {
        this.loading = false
        if (res.statusCode === 200) {
          TipsBox('success', res.message)
          this.dialogFormVisible = false
        } else if (res.statusCode === 500) {
          TipsBox('success', res.errors)
        }
      })
    },
    // 修改密码
    createPassword(v) {
      this.loading = true
      if (v.CreateOn === null) {
        v.CreateOn = dayjs().format('YYYY-MM-DD HH:mm:ss.SSS')
      }
      ChangeSysUserPassWord(jsonToParams(v)).then((res) => {
        this.loading = false
        if (res.statusCode === 200) {
          TipsBox('success', res.message)
          this.dialogPasswordVisible = false
        }
      })
    }
  }
}
</script>
